import React, { useRef, useEffect, useState, useMemo } from "react";
import * as echart from "echarts";
import {echartData} from "./ChartContentBox";

const HistogramEchart = ({ currIndex, itemClick }) => {
  const chartRef = useRef(null);
  const currObj = useRef(0);
  const [myEchart, setMyEchart] = useState(null);

  const resizeEchart = () => {
    myEchart && myEchart.resize();
  };

  const option = useMemo(() => {
    const option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {
        show: true,
        trigger: "axis",
        // 坐标轴指示器，坐标轴触发有效(axis)
        axisPointer: {
          type: "shadow",
          shadowStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  color: "#ccc",
                  offset: 0,
                },
                {
                  color: "rgba(159,187,228,0.3)",
                  offset: 1,
                },
              ],
            },
          },
        },
      },
      // legend: {
      //     data:['销量','销量2']
      // },
      xAxis: {
        type: "category",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        // axisLine: {
        //   show: true,
        //   symbolSize: [15,15],
        //   SymbolOffset: [4,-4]
        // }
        axisLabel: {
          color: "blue",
           fontSize:20,
          interval: 0,
          formatter: function (value, index) {
            
            let name =
            echartData[+currIndex] && echartData[+currIndex][`name`]
                ? echartData[+currIndex][`name`]
                : "";
          
            return `{value|${value}}\n{active_${value === name}|}`;
          },
          rich: {
            active_true: {
              backgroundColor: 'red',
              width: 20,
              height: 20,     
            },
            active_false: {},
          },
        },
        data: [
          "小学",
          "初中",
          "高中",
          "大学",
          "大一",
          "大二",
          "大三",
          "大四",
          "实习",
        ],
      },
      yAxis: [
        {
          type: "value",
          name: "单位：数量",
          // nameGap: 10
        },
      ],
      series: [
        {
          name: "学历",
          type: "bar",
          data:echartData,
          tooltip: {
            show: false,
          },
          label:{
            show:true,
            position:'top',
            color:'black',
            textShadownBlur: 6
          }
          ,
          barWidth: 32,
          color: new echart.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: "#6BAFFF" },
            { offset: 1, color: "rgba(107,175,255,0.2)" },
          ]),
        },
      ],
    };
    return option;
  }, [currIndex]);
  useEffect(() => { 
    setMyEchart(echart.init(chartRef.current));
  }, []);

  useEffect(() => {
    currObj.current = currIndex;

    if (myEchart) {
      // 取消高亮
      myEchart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
      });
      // 高亮所选的条目
      myEchart.dispatchAction({
        type: "hightlight",
        seriesIndex: 0,
        dataIndex: currIndex,
      });
    }
  }, [currIndex]);
  useEffect(() => {
    if (myEchart) {
      window.addEventListener("resize", resizeEchart);
      myEchart.on("click", function (params) {
        if (params.dataIndex !== currObj.current) {
          itemClick && itemClick(params);
       
        } else {
          itemClick && itemClick();
        }
      });

      // return () => {
      //   window.removeEventListener("resize", resizeEchart);
      //   myEchart.dispose();
      //   setMyEchart(null);
      // };
    }
  }, [myEchart]);
  useEffect(() => {
    myEchart && myEchart.setOption(option);
    if (myEchart) {
      setTimeout(() => {
        resizeEchart();
      }, 300);
    }
  }, [myEchart,option]);



  return <div style={{ width: "100%", height: "100%" }} ref={chartRef}></div>;
};
export default HistogramEchart;
